﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<script src="dollar.js"></script>
<script src="ColorPanel.js"></script>
<script src="STemplate.js"></script>
<script src="RText.js"></script>
<script src="SDrag.js"></script>
<script src="Slider.js"></script>
<script src="Tip.js"></script> 
<script src="FormChecker.js"></script>
<script src="EditableTable.js"></script>
<style>
body{
	font-size: 12px;
}
</style>
</head>
<body>
<div class="C0" rel="hello">
	<h2>Make Something to laugh</h2>
	<div class="C1" link="http://www.pp.tv">DIVC1</div>
	<div class="C2">DIVC2</div>
	<div class="C1">DIVC1</div>
	<div class="C1 C2">DIVC1&C2</div>
	<div class="C1 C2 C3" rel="world">DIVC1&C2&C3</div>
	<div id="ID1">
		<a href="http://www.baboo.com">baboo.com</a>
		<a href="http://www.pdollar.com">pdollar.com</a>
		<a href="http://www.laugh.com">laugh.com</a>
	</div>
	<em>always ...</em>
</div>
<form action="a.php" method="get">
<select> 
	<option value="1">1</option>
	<option value="2">2</option> 
	<option value="3">3</option>
</select> 
<input type="text" value="hello" name="action" checkreg="noempty" onchange="debug(1)"/>
<input type="text" value="hello" name="method" checkreg="noempty"/>
<input type="checkbox" name="checks" value="checks1" style="height:17px;background:#000"/>
<input type="checkbox" name="checks" value="checks2"/>
<input type="submit" value="submit"/>
</form>
<div class="C0">
	<h2>Make Something to laugh</h2>
	<div class="C1">DIVC1</div>
	<div class="C2">DIVC2</div>
	<div class="C1">DIVC1</div>
	<div class="C1 C2">DIVC1&C2</div>
	<div class="C1 C2 C3">DIVC1&C2&C3</div>
	<div id="ID2">
		<a href="http://www.baboo.com">baboo.com</a>
		<a href="http://www.pdollar.com">pdollar.com</a>
		<a href="http://www.laugh.com">laugh.com</a>
	</div>
	<em>always ...</em>
</div>

<div id="drag" style="border:1px solid #000;width:200px;height:200px;background:#fff">
	<div id="handle" style="background:#ccc">this is title</div>
	<div id="tip1" style="background:#fff"></div>
	<div id="tip2" style="background:#fff"></div>
</div>
<input type="button"  onclick="tip.show(event)" onmousemove="tip.unfixedShow(event, [null, '改变了内容1'])" onmouseout="tip.hide()" value="take you mouse moving no me..." />
<input type="button" onclick="tip.hide()" value="hide tip"/>
		

<div id="Debug" style="position:absolute;z-index:1000;top:10px;left:600px;width:300px;border:1px solid #000;background:#fff">
		<div id="DebugTitle" style="background:#008000;color:#fff">Debug<div style="margin-left:100px;position:absolute;right:0px;top:0px;cursor:pointer;color:#800000;font-weight:bold" onclick="$('#DebugBody').html('')">Clear</div></div>
		<div id="DebugBody"></div>
		<div id="DebugJS"><input type="text" style="width:98%" onkeydown="if([13].include($(event, 'keyCode')) ) debug(eval(this.value));" /></div>
</div>

<style>
#ColorPanelId{border:1px solid #000;width:245px}
#ColorPanelId dd{margin:0}
.CP_HEAD{BORDER-BOTTOM:1PX DOUBLE #000;BACKGROUND:#004080;COLOR:#FFF;HEIGHT:20PX;LINE-HEIGHT:20PX;PADDING-LEFT:10PX}
.CP_BODY{BACKGROUND:#FFF}
.CP_BASECOLORPNL{FLOAT:LEFT;MARGIN:10PX}
.CP_GRAYPNL{FLOAT:LEFT;MARGIN:10PX 0 10PX 10PX;}
.CP_FOOT{CLEAR:BOTH}
.CP_PREVIEW{FLOAT:LEFT;WIDTH:50PX;HEIGHT:20PX;BORDER:1PX SOLID #000;MARGIN:0 5PX 5PX 10PX}
.CP_PREVIEWSET{FLOAT:LEFT;MARGIN:0 5PX 5PX 0;COLOR:#999}
.CP_BUTTONS{FLOAT:LEFT;MARGIN-LEFT:30PX;HEIGHT:25PX;LINE-HEIGHT:25PX}
.CP_BUTTONS A{DISPLAY:BLOCK;FLOAT:LEFT;MARGIN-LEFT:10PX;COLOR:#004080}
</style>
<input type="text"/>
<input type="button" value="调色板" onclick="cp.show()"/>
<div id="ColorPanel"></div>

<div id="SliderTrack" style="position:absolute;width:300px;margin-bottom:20px;height:12px;font-size:0px;background:#fff;border-bottom:2px solid #000">
	<div id="SliderDrager" style="position:absolute;left:0px;cursor:pointer;top:2px;width:5px;height:10px;background:green;font-size:0"></div>
	<div id="slider-value" style="position:absolute;left:0px;top:12px;height:20px;font-size:11px;line-height:20px;width:100%">
<span style="float:left">0</span><span style="float:right">2</span>
	</div>
</div>
<table>
<tr> 
	<td>td</td>
</tr>
</table>

<script language="JavaScript">
	$('<option></option>');
	window.onerror = function(e) {debug('<span style="color:red">' + e + '</span>'); };
	function debug(s) { $('#DebugBody').item(0).innerHTML += s + '<br/>' }
	new $.SDrag('Debug', 'DebugTitle');
	new $.SDrag($('input[type=button][:first]'), null, {onStartDrag: function(e){
		e.css('opacity:0.5');
		}, onEndDrag: function(e) {
			e.css('opacity:1');
	}});
	var slider = new $.Slider({
		$tracker : $('#SliderTrack'),
		$dragger : $('#SliderDrager'),
		onChange : function (v) {
			console.log(v);
		},
		range : [1, 2],
		step : 0.1
	});
	var tip = new $.Tip('drag', {es: ['handle', 'tip1', 'tip2']});

	var cp = new $.ColorPanel({onok: function(c){$('input[type=text][:last]').e.value = c;}});
	cp.install($('#ColorPanel').e);
	new $.SDrag(cp.e, cp.e.find('dt.CP_HEAD'));
	$(function(){
		debug($('form').$('action'));
		debug($('form input').$('value', 'world').$('value'));
	});
</script>
<style>
#RText, #RText1{position:relative;margin-left:300px}
#RText1{margin-top:300px}
#RText input, #RText1 input{width:300px;height:18px}
#RTextShow, #RTextShow1{position:absolute;top:30px;background:#fff;border:1px solid #000;width:300px}
.RTextElement {}
.RTextElementSelected{background:#000;color:#fff}
</style>
<div id="RText">
    <input type="text"/>
    <div id="RTextShow"></div>
</div> 

<div id="RText1">
    <input type="text"/>
    <div id="RTextShow1"></div>
</div> 
<div  id="overtest" style="width:200px;height:200px;background:#000">
	<div style="width:100px;height:100px;background:#ccc"></div>
</div>   
<form action="index.html" method="post" onsubmit="return (new $.FormChecker(this)).run()">
	<input type="text" check="Digit"  range="1,5" msg="必须为数字，1，5"/>
	<input type="text" check="NotEmpty" msg="不能为空"/>
	<textarea check="Bool" msg="必须为Bool值">
	</textarea> 
	<input type="submit" />
</form>
<script language="JavaScript"> 
	function keyevent (event) {
		debug('keycode:' + $(event, 'keyCode'));	
		debug( 'value:' + $(event, 'element').value);
	}
	
  new $.RText({
  	textInput: $('#RText input'),
  	showBox: $('#RTextShow'),
  	url: 'http://stat.pp.tv/do.ashx?action=getHotWords&w={0}',
  	useJson: true,
  	delay: 0,
  	//hideWhenNoResult : false,
  	process: function (o) { return '<div class="RTextElement">' + o[0] + '</div>' },
  	noCache : false,
  	jsonCallbackName : 'thanks'
  });  

  new $.RText({
  	textInput: $('#RText1 input'),
  	showBox: $('#RTextShow1'),
  	url: 'http://stat.pp.tv/do.ashx?action=getHotWords&w={0}',
  	useJson: true,
  	delay: 0,
  	hideWhenNoResult : false,
  	process: function (o) { return '<div class="RTextElement">' + o[0] + '</div>' },
  	noCache : false,
  	jsonCallbackName : 'thanks'
  });  

</script>
<div style="width:100%;height:200px;">
	<div style="float:right;height:100%;width:150px;background:#000"></div>
	<div style="padding:0 150px 0 0">
		<div style="height:20px;border:3px solid #000"></div>
	</div>
</div>
<table id="EditableTable">
	<tbody>
		<tr>
			<td>1</td>
			<td>hello1</td>
			<td>
				<a class="cmd_up" onclick="edtbl.moveToTop(this, 1, event)">上移</a>
				<a onclick="edtbl.moveToTop(this, undefined, event)">置顶</a>
				<a class="cmd_down">下移</a>
				<a onclick="edtbl.moveToBottom(this, undefined, event)">置底</a>
				<a onclick="edtbl.remove(this, event)">删除</a>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>hello2</td>
			<td>
				<a onclick="edtbl.moveToTop(this, 1, event)">上移</a>
				<a onclick="edtbl.moveToTop(this, undefined, event)">置顶</a>
				<a onclick="edtbl.moveToBottom(this, 1, event)">下移</a>
				<a onclick="edtbl.moveToBottom(this, undefined, event)">置底</a>
				<a onclick="edtbl.remove(this, event)">删除</a>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>hello3</td>
			<td>
				<a onclick="edtbl.moveToTop(this, 1, event)">上移</a>
				<a onclick="edtbl.moveToTop(this, undefined, event)">置顶</a>
				<a onclick="edtbl.moveToBottom(this, 1, event)">下移</a>
				<a onclick="edtbl.moveToBottom(this, undefined, event)">置底</a>
				<a onclick="edtbl.remove(this, event)">删除</a>
			</td>
		</tr>
		<tr>
			<td>4</td>
			<td>hello4</td>
			<td>
				<a onclick="edtbl.moveToTop(this, 1, event)">上移</a>
				<a onclick="edtbl.moveToTop(this, undefined, event)">置顶</a>
				<a onclick="edtbl.moveToBottom(this, 1, event)">下移</a>
				<a onclick="edtbl.moveToBottom(this, undefined, event)">置底</a>
				<a onclick="edtbl.remove(this, event)">删除</a>
			</td>
		</tr>
		<tr>
			<td>5</td>
			<td>hello5</td>
			<td>
				<a onclick="edtbl.moveToTop(this, 1, event)">上移</a>
				<a onclick="edtbl.moveToTop(this, undefined, event)">置顶</a>
				<a onclick="edtbl.moveToBottom(this, 1, event)">下移</a>
				<a onclick="edtbl.moveToBottom(this, undefined, event)">置底</a>
				<a onclick="edtbl.remove(this, event)">删除</a>
			</td>
		</tr>
	</tbody>
</table>
<style>
tr.Red{background:red}
tr.Green{background:green}
</style>
<div id="DragE" style="position:absolute;border:1px solid red;background:#fcc"></div>
<script>
var edtbl = new $.EditableTable({
	tbody: $('#EditableTable tbody')[0],
	positionElementQueryStr: 'td[0]',
	onTDCreated: function (td, index) {debug('created td' + index);},
	onTRCreated: function (tr, index) {debug('created tr' + index);},
	positionOperatingStyle: {down: 'Red', up: 'Green'},
	dragElement: 'DragE',
	getDragInfo: function(tr) {return $('td[1]', tr).html(); }
});
</script>
<style>
#imagelistrender img{float:left}
</style>
<div id="imagelistrender"><!--
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg4.youku.com/0100011F46484DA233A1560042CCAF87D3E820-B822-17CC-25CC-0F129BCD69B9"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://p.v.iask.com/259/344/14792864_1.jpg"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg8.youku.com/0100011F46486DCF47B843008306DF161F048F-2BAF-E237-E800-F5E766228F6A"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg2.youku.com/0100011F46486E3171E41E0036BC6579C40C06-BE8B-CC65-2413-8460D6B12B1A"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://p.v.iask.com/513/346/14816288_1.jpg"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg2.youku.com/0100011F46486EFE61EEA3006D939E01A950C1-9F25-9149-74B3-FF7D1A88915C"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://ikan.pplive.com/play/vod/105816"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg7.youku.com/0100011F46484B26D64F5D005BD6B772D52909-49B2-90E6-373E-F3DAE1B8AF7E"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg7.youku.com/0100011F46484B26D66571005BD6B727C7A1A2-F363-0A0E-ED84-D57C3CEF3E9D"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg4.youku.com/0100011F46484DA2330F2A0042CCAFF92AB6B9-2341-993E-F818-3276D82F3194"/>
<img src="http://www.pp.tv/java/images/default.jpg" rel="http://vimg4.youku.com/0100011F46484DA233A1560042CCAF87D3E820-B822-17CC-25CC-0F129BCD69B9"/>-->

</div>
<div id="test">
	<div class="c1">
		<div class="c1">
			<div class="c1"></div>
		</div>
	</div>
</div>
<script>
/*new $.ImageListRender({
images : $('#imagelistrender img'),
maxParallel: 5	
});*/
$(document.body).click(function(evt){
alert($(evt, 'x'));	
});
</script>
</body>
</html>
                                                            
